<template>
  <div class="floor">
    <div class="w" :key="c" v-for="c in classifies" :id="c.css">
      <div class="box-hd">
        <h3 v-text="c.name"></h3>
      </div>
      <div class="box-bd">
        <ul class="tab-con" v-if="c.msg.length == 0">
          <li :key="r" v-for="r in c.results">
            <a @click="goToProduce(r.produceId)">
              <div class="tab-con-img">
                <img :src="r.produceImgs" />
              </div>
              <div class="tab-con-price fl">
                <span>￥</span>
                <span v-text="r.producePrice"></span>
              </div>
              <div class="tab-con-content fr">
                <span v-text="r.produceName" style="color:red;font-weight:bold;"></span>
                <br />
                <span v-text="r.produceDesc"></span>
              </div>
            </a>
          </li>
        </ul>
        <div class="msg" v-text="c.msg" v-else></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classifies: [
        { id: 1, name: "文学", css: "household", results: [], msg: "正在搜寻相关书籍……"  },
        { id: 2, name: "社科", css: "homesupply", results: [], msg: "正在搜寻相关书籍……" },
        { id: 3, name: "少儿", css: "phone", results: [], msg: "正在搜寻相关书籍……" },
        { id: 4, name: "计算机", css: "pc", results: [], msg: "正在搜寻相关书籍……" },
        { id: 5, name: "生活", css: "dress", results: [], msg: "正在搜寻相关书籍……" },
        { id: 6, name: "文教", css: "package", results: [], msg: "正在搜寻相关书籍……" },
        { id: 7, name: "科技", css: "food", results: [], msg: "正在搜寻相关书籍……" },
        { id: 8, name: "艺术", css: "fresh", results: [], msg: "正在搜寻相关书籍……" },
        { id: 9, name: "经管", css: "book", results: [], msg: "正在搜寻相关书籍……" },
        { id: 10, name: "特色书籍", css: "health", results: [], msg: "正在搜寻相关书籍……" },
      ],
      produces: [],
    };
  },
  methods: {
    goToProduce(id) {
      window.open(process.env.PRODUCE_URL + id, '_blank');
    },
  },
  mounted() {
    let url = process.env.URL_HEAD + "/produce/produce/list";
    // let url = process.env.URL_HEAD + "/api/produce/produce/list";
    for(var i = 0; i < this.classifies.length; ++i) {
      this.classifies[i].msg = "正在搜寻相关书籍……";
    }
    this.$http
      .get(url, {
        params: {
          limit: 2147483647,
        }
      })
      .then(
        (response) => {
          console.log("connect " + url + " success");
          console.log(response);
          this.produces = [];
          this.produces = this.produces.concat(JSON.parse(JSON.stringify(response.body.page.list)));
          for(var i = 0; i < this.classifies.length; ++i) {
            this.classifies[i].results = [];
            for(var j = 0; j < this.produces.length; ++j) {
              if(this.produces[j].classifyId == this.classifies[i].id) {
                this.classifies[i].results.push(this.produces[j]);
              }
            }
            if(this.classifies[i].results.length == 0){
              this.classifies[i].msg = "该分类暂时没有任何宝贝~"
            } else if(this.classifies[i].results.length > 4) {
              this.classifies[i].results = this.classifies[i].results.slice(0, 4);
              this.classifies[i].msg = "";
            } else {
              this.classifies[i].msg = "";
            }
          }
        },
        (response) => {
          console.log("floor error: cannot connect " + url);
          for(var i = 0; i < this.classifies.length; ++i) {
             this.classifies[i].msg = "请求失败！";
          }
        }
      );
  },
};
</script>

<style scoped>
.box-hd {
  height: 30px;
  border-bottom: 2px solid #ff5500;
  margin-top: 20px;
}
.box-hd h3 {
  border-left: 3px solid #ff5500;
  padding-left: 10px;
  float: left;
  font-size: 18px;
  color: #ff5500;
  font-weight: bold;
}
.box-bd {
  height: 340px;
  width: 100%;
}
.tab-con li {
  float: left;
  width: 298px;
  height: 340px;
  border-left: 1px solid#f4f4f4;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}
.tab-con li:hover {
  border-color: #ff5500;
}
.tab-con-img img {
  display: block;
  overflow: hidden;
  height: 300px;
  width: 100%;
  transform: scale(0.8);
}
.tab-con-price {
  width: 40%;
  height: 39px;
  text-align: center;
  line-height: 39px;
  font-size: 18px;
  color: #ff5500;
}
.tab-con-content {
  width: 57%;
  height: 39px;
  padding-right: 5px;
  font-size: 12px;
}
.tab-con-content span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;/* 不换行 */
  text-overflow: ellipsis;
}
.box-bd .msg {
  width: 100%;
  height: 340px;
  font-size: 20px;
  font-weight: bold;
  line-height: 340px;
  text-align: center;
  color: #b1191a;
}
</style>